<template>
    <!-- <yd-ls-tab class="yd-ls-subscribe-tab" :isactive="actives" types="subscribe" :tourl="urls" label="电话|线下">

      <span slot="zero">
        <yd-list theme="4" class="yd-ls-subscribe-list">
          <yd-list-item class="yd-ls-subscribe-list-item"
                        v-for="items in telList"
                        :key="items.id"
                        @click.native="subscribeDetail(items.id)">
            <img slot="img" :src="items.head || defalut_img">
            <span slot="title">
              <span>{{ items.doctor_name }}<i class="yd-tabbar-dot" v-if="items.unread"></i></span>
              <span>{{ items.status==0 ? '待审核' :
                items.status==1 ? '待付款' :
                items.status==2 ? '待咨询' :
                items.status==3 ? '已关闭' :
                items.status==4 ? '已结束' : '已评价'}}</span>
            </span>
            <yd-list-other slot="other">
              <div>
                <p class="list-price">{{ items.cust_name }} <i v-if="items.title">|</i> {{ items.title }}</p>
                <p class="list-del-price">预约时间：{{ items.pre_date }}</p>
              </div>
            </yd-list-other>
          </yd-list-item>
        </yd-list>

        <yd-ls-default v-if="!telList.length">暂无预约记录</yd-ls-default>
        <yd-ls-more v-if="telTotal > telList.length" @click.native="loadmore('tel')"></yd-ls-more>
      </span>

      <span slot="one">
        <yd-list theme="4" class="yd-ls-subscribe-list">
          <yd-list-item  class="yd-ls-subscribe-list-item"
                         v-for="items in lineList"
                         :key="items.id"
                         @click.native="subscribeDetail(items.id)">
            <img slot="img" :src="items.head || defalut_img">
            <span slot="title">
              <span>{{ items.doctor_name }}<i class="yd-tabbar-dot" v-if="items.unread"></i></span>
              <span>{{ items.status==0 ? '待审核' :
                items.status==1 ? '待付款' :
                items.status==2 ? '待咨询' :
                items.status==3 ? '已关闭' :
                items.status==4 ? '已结束' : '已评价'}}</span>
            </span>
            <yd-list-other slot="other">
              <div>
                <p>{{ items.cust_name }} | {{ items.title }}</p>
                <p>预约时间：{{ items.pre_date }}</p>
                <p class="yd-ls-subscribe-address" >面诊地点：{{ items.location }}</p>
              </div>
            </yd-list-other>
          </yd-list-item>
        </yd-list>

        <yd-ls-default v-if="!lineList.length">暂无预约记录</yd-ls-default>
        <yd-ls-more  v-if="lineTotal > lineList.length" @click.native="loadmore('line')"></yd-ls-more>
      </span>

    </yd-ls-tab> -->

    <!--返回顶部-->
    <!-- <yd-backtop></yd-backtop> -->


  <yd-ls-layout title="我的预约" :onfoot=false :tolfurl="urls" style="background-color: rgb(255,255,255)">
    <div class="yd-ls-height"></div>
    <yd-tab>
        <yd-tab-panel label="全部">
          <yd-list theme="4" class="yd-ls-subscribe-list">
            <yd-list-item 
              class="yd-ls-subscribe-list-item"
              v-for="items in telList"
              :key="items.id"
              @click.native="subscribeDetail(items.id)">
              <img slot="img" :src="items.head || defalut_img">
              <span slot="title">
                <span>{{ items.doctor_name }}<i class="yd-tabbar-dot" v-if="items.unread"></i></span>
                <span style="color:#ff685d">{{ items.status==0 ? '待审核' :
                  items.status==1 ? '待付款' :
                  items.status==2 ? '待咨询' :
                  items.status==3 ? '已关闭' :
                  items.status==4 ? '已结束' : '已评价'}}</span>
              </span>
              <yd-list-other slot="other">
                <div>
                  <p class="list-price">
                    <yd-icon name="home" size=".3rem" color="#FF685D"></yd-icon>
                    <yd-icon name="phone3" size=".3rem" color="#000"></yd-icon>
                  </p>
                  <p class="list-price" style="padding-top: 15px;">&nbsp;</p>
                </div>
                <div style="text-align:right;">
                  <p style="font-weight:600; font-size: .35rem; color: #505050;">￥999</p>
                  <p class="list-del-price" style="padding-top: 15px;">{{ items.pre_date }}</p>
                </div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>
          <yd-ls-default v-if="!telList.length">暂无预约记录</yd-ls-default>
          <yd-ls-more v-if="telTotal > telList.length" @click.native="loadmore('tel')"></yd-ls-more>
        </yd-tab-panel>
        <yd-tab-panel label="待审核">
          2
        </yd-tab-panel>
        <yd-tab-panel label="待付款">
          3
        </yd-tab-panel>
        <yd-tab-panel label="待咨询">
          4
        </yd-tab-panel>
        <yd-tab-panel label="已结束">
          5
        </yd-tab-panel>
    </yd-tab>
  </yd-ls-layout>
</template>

<script>
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import ydLsTab from '../../../components/yd-ls-tab.vue'
  import ydLsMore from '../../../components/yd-ls-more.vue'
  import ydLsDefault from '../../../components/yd-ls-default.vue'
  import api from '../../../axios/api'

  export default {
    name: 'subscribe',
    props: {},
    data() {
      return {
        urls: 'info.html',
        dots: '',  // 0|1|2
        dots1: '0',
        dots2: '1',
        telList: [],
        lineList: [],
        actives: '',
        telIndex: 1,
        telSize: 7,
        telTotal: 0,
        lineIndex: 1,
        lineSize: 7,
        lineTotal: 0,
        defalut_img: api.default_img_dot // 医生缺省头像
      }
    },
    created() {

      //TODO: 从公众号进时，检查openid
      if(this.$route.query.openid){
        localStorage.openId = this.$route.query.openid
        sessionStorage.isTab = this.$route.query.type // 从外面进来后，显示相对应的tab,顺序：0,1,2
      }

      //TODO:初始化数据
      this.getTelList()
      // 从详情页返回后，默认激活相关tab
      this.actives = sessionStorage.isTab || ''
    },
    methods: {
      init() {

      },
      getTelList() {
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.subscribe_tel,{
          params:{
            pageindex:this.telIndex,
            pagesize:this.telSize
            }})
            .then(m=>{
              let tel_data = m.data
              this.telList = tel_data.data
              this.telTotal = tel_data.pageinfo.total
              // 加载线下列表
              this.getLineList()
            }).catch(err=>{
              this.$dialog.loading.close()
              this.$dialog.alert({mes: JSON.stringify(err)})
            })
      },
      getLineList() {
        this.axios.get(api.subscribe_line,{
          params:{
            pageindex:this.lineIndex,
            pagesize:this.lineSize
            }})
            .then(m=>{
              let line_data = m.data
              this.lineList = line_data.data
              this.lineTotal = line_data.pageinfo.total 
              // 加载红点
              this.getSubscribeUnread()
            }).catch(err=>{
              this.$dialog.loading.close()
              this.$dialog.alert({mes: JSON.stringify(err)})
            })
      },
      getSubscribeUnread() {
        this.axios.get(api.subscribe_unread)
        .then(m=>{
          let unread_data = m.data
          this.$store.dispatch('fetchTabUnread', unread_data.data)
          this.$dialog.loading.close()
        }).catch(err=>{
          this.$dialog.loading.close()
          this.$dialog.alert({mes: JSON.stringify(err)})
        })
      },
      subscribeDetail (inds) {
        sessionStorage.getSubscribeId = inds
        window.location.href = './subscribedetail.html#/'
        //this.$router.push({path: '/subscribedetail', query: { inds: inds }})
      },

      getSubscribeList(api_type, types, pindex, psize) {
        this.axios.get(api_type, {params: {pageindex: pindex, pagesize: psize}})
          .then(m=>{
            let subscribe_data = m.data
            if(types === 'tel'){
              this.telList = this.telList.concat(subscribe_data.data)
            }
            if(types === 'line'){
              this.lineList = this.lineList.concat(subscribe_data.data)
            }

            this.$dialog.loading.close()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      // 点击加载更多
      loadmore(type) {
        this.$dialog.loading.open(api.default_loading_txt);
        if(type === 'tel'){
           this.telIndex = this.telIndex + 1
          this.getSubscribeList(api.subscribe_tel, type, this.telIndex, this.telSize)
        }
        if(type === 'line'){
          this.lineIndex = this.lineIndex + 1
          this.getSubscribeList(api.subscribe_line, type, this.lineIndex, this.lineSize)
        }
      },
    },
    mounted() {
      this.init()
    },
    destroyed() {
      sessionStorage.isTab = 0
    },
    components: { ydLsLayout, ydLsTab, ydLsMore, ydLsDefault }


  }
</script>

<style>

  .yd-ls-subscribe-tab  .yd-ls-tab .yd-tabbar-dot {
    margin-left: -.58rem;
  }

  .yd-ls-subscribe-list.yd-list {
    padding: 0;
  }
  .yd-ls-subscribe-list.yd-list .yd-list-item {
    padding: 0.2rem 0.3rem;
    line-height: initial;
  }
  .yd-ls-subscribe-list.yd-list .yd-list-item .yd-list-img img {
    height: 1.2rem;
  }
  .yd-ls-subscribe-list.yd-list .yd-list-item .yd-list-img {
    width: 1.2rem;
    padding: 0.6rem 0;
    border-radius: 50%;
    margin-right: 0.2rem;
  }
  .yd-ls-subscribe-list.yd-list .yd-list-item .yd-list-mes .yd-list-other {
    padding-top: 0;
  }
  .yd-ls-subscribe-list.yd-list .yd-list-item .yd-list-title {
    padding-bottom: .1rem
  }
  .yd-ls-subscribe-list.yd-list .yd-list-item .yd-list-title span span:last-child{
    float: right;
    font-size: 12px;
    color: #919191;
    font-weight: normal;
  }
  .yd-ls-subscribe-list.yd-list .yd-list-item .yd-list-other p {
    padding-bottom: .05rem
  }
  .yd-ls-subscribe-list.yd-list .yd-list-item .yd-list-other .yd-ls-subscribe-address{
    width: 4rem;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
  }
  .yd-ls-subscribe-list.yd-list .yd-list-item .yd-list-mes .yd-list-title {
    font-size: .28rem;
  }

  .yd-ls-subscribe-list-item .yd-list-mes span span {
    position: relative;
  }
  .yd-ls-subscribe-list-item .yd-list-mes span .yd-tabbar-dot {
    margin-left: 0;
  }
</style>